<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>JSSpec results</title>
<link rel="stylesheet" type="text/css" href="../JSSpec/JSSpec.css" />
<script type="text/javascript" src="../JSSpec/diff_match_patch.js"></script>
<script type="text/javascript" src="../JSSpec/JSSpec.js"></script>
<script type="text/javascript" src="../amok/amok.js"></script>


<!-- Libraries needed for Specs -->
<script type="text/javascript" src="../squigle.js"></script>
<script type="text/javascript" src="../svgAdapter.js"></script>
<script type="text/javascript" src="../vmlAdapter.js"></script>   

<script type="text/javascript">// <![CDATA[

/**
 * Create a viewing window
 */

function createViewingWindowLeft(){
	var viewingWindow = document.createElement('div');
	viewingWindow.style.position = "absolute";
	viewingWindow.style.right = "50px";
	viewingWindow.style.top = "50px";
	viewingWindow.style.border = "1px black solid";
	viewingWindow.style.backgroundColor = "white";
	viewingWindow.style.width = "200px";
	viewingWindow.style.height = "200px";
	viewingWindow.style.background = "url(images/background.gif)";
	document.body.appendChild(viewingWindow);
	return viewingWindow;	
}

function createViewingWindowRight(){
	var viewingWindow = document.createElement('div');
	viewingWindow.style.position = "absolute";
	viewingWindow.style.right = "300px";
	viewingWindow.style.top = "50px";
	viewingWindow.style.border = "1px black solid";
	viewingWindow.style.backgroundColor = "white";
	viewingWindow.style.width = "200px";
	viewingWindow.style.height = "200px";
	viewingWindow.style.background = "url(images/background.gif)";
	document.body.appendChild(viewingWindow);
	return viewingWindow;	
}

var visualHelper = {
	leftBox: null,
	rightBox: null,
	getLeftBox: function(){
		if(!this.leftBox) this.leftBox = createViewingWindowLeft();
		this.leftBox.style.display = "";
		return this.leftBox;
	},
	getRightBox: function(){
		if(!this.rightBox) this.rightBox = createViewingWindowRight();
		this.rightBox.style.display = "";
		return this.rightBox;
	},
	remove: function(){
		this.leftBox.style.display = "none";
		this.leftBox.innerHTML = "";
		this.rightBox.style.display = "none";
		this.rightBox.innerHTML = "";		
	},
	getImage: function(path){
		var image = document.createElement("img");
		image.src = path;
		return image;
	},
	setBoxSize: function(size){
		if(!this.leftBox) this.leftBox = createViewingWindowLeft();
		if(!this.rightBox) this.rightBox = createViewingWindowRight();
		this.leftBox.style.width = size + "px";
		this.leftBox.style.height = size + "px";		
		this.rightBox.style.width = size + "px";
		this.rightBox.style.height = size + "px";
		
		if (size > 200) {
			this.rightBox.style.left = parseInt(this.leftBox.style.left) + parseInt(this.leftBox.style.width) + 50 + "px";
		}		
		
	}
	
};

//Use the correct adaptor for the browser
var isMsie = /msie/.test( navigator.userAgent.toLowerCase() ) && !/opera/.test( navigator.userAgent.toLowerCase() );
if(isMsie){
    squigle.setAdapter(squigle.vmlAdapter);
} else {
    squigle.setAdapter(squigle.svgAdapter);
}

describe('Scenario 1: Rectangle', {
	'before_each': function(){
		//Create a stub for browser sniffing
	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When I generate a rectangle it will look the same as expected': function(){
        
        var image = visualHelper.getImage("images/rectangle.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(150,100),
            new squigle.Point(25,50)
        );
        canvas.node().appendChild(rectangle.node());
		
		visualHelper.getLeftBox().appendChild( canvas.node() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a rectangle with a fill it will look as expected': function(){
        
        var image = visualHelper.getImage("images/rectangle_red_fill.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(150,100),
            new squigle.Point(25,50),
			null,
			new squigle.Fill("#FF0000")
        );
        canvas.append(rectangle);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a rectangle with a thick stroke it will look as expected': function(){
        
        var image = visualHelper.getImage("images/rectangle_thick_blue_stroke.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(150,100),
            new squigle.Point(25,50),
			new squigle.Stroke("#0000FF", null, 10)
        );
        canvas.append(rectangle);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}
});

describe('Scenario 2: Overflow', {
	'before_each': function(){
		//Create a stub for browser sniffing
	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When I generate a square the border stroke will not overflow outside of the canvas': function(){
        
        var image = visualHelper.getImage("images/square_red_fill_blue_stroke.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(200,200),
            new squigle.Point(0,0),
            new squigle.Stroke("#0000FF", null, 8),
            new squigle.Fill("#FF0000", 100)
        );
        canvas.append(rectangle);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a smaller square the border stroke on the top and left side will not overflow': function(){
        
        var image = visualHelper.getImage("images/small_square_red_fill_blue_stroke.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(100,100),
            new squigle.Point(0,0),
            new squigle.Stroke("#0000FF", null, 8),
            new squigle.Fill("#FF0000", 100)
        );
        canvas.append(rectangle);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}
});

describe('Scenario 3: Opacity', {
	'before_each': function(){
		//Create a stub for browser sniffing
	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When I generate a rectangle with fill opacity 50 it will look as exected': function(){
        
        var image = visualHelper.getImage("images/small_rectangle_red_fill_no_stroke_opacity_50.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(150,100),
            new squigle.Point(10,10),
            new squigle.Stroke("#FF0000", 50, 0),
            new squigle.Fill("#FF0000", 50)
        );
        canvas.append(rectangle);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a rectangle with fill opacity 30 and stroke opacity 60 is will look as exected': function(){
        
        var image = visualHelper.getImage("images/small_rectangle_red_fill_opacity_30_blue_stroke_opacity_60.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(150,100),
            new squigle.Point(10,10),
            new squigle.Stroke("#0000FF", 60, 8),
            new squigle.Fill("#FF0000", 30)
        );
        canvas.append(rectangle);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I display one transparent shape on top of another they will display as expected': function(){
        
        var image = visualHelper.getImage("images/transparent_squares_overlap.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle1 = new squigle.Rectangle(
            new squigle.Size(100,100),
            new squigle.Point(20,20),
            new squigle.Stroke("#0000FF", 40, 8),
            new squigle.Fill("#FF0000", 40)
        );
        var rectangle2 = new squigle.Rectangle(
            new squigle.Size(100,100),
            new squigle.Point(70,70),
            new squigle.Stroke("#0000FF", 40, 8),
            new squigle.Fill("#FF0000", 40)
        );		
        canvas.append(rectangle1);
		canvas.append(rectangle2);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}
});

describe('Scenario 4: Path - Absolute', {
	'before_each': function(){
		//Create a stub for browser sniffing
	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When I generate a horizontal line it will look as expected': function(){
        
        var image = visualHelper.getImage("images/path_horizontal_black_stroke_no_fill.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path();
		path.moveTo(new squigle.Point(10,10)).lineTo(new squigle.Point(190,10));
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a vertical line it will look as expected': function(){
        
        var image = visualHelper.getImage("images/path_vertical_black_stroke_no_fill.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path();
		path.moveTo(new squigle.Point(10,10)).lineTo(new squigle.Point(10,190));		
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a diagonal line it will look as expected': function(){
        
        var image = visualHelper.getImage("images/path_diagonal_black_stroke_no_fill.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path();
		path.moveTo(new squigle.Point(10,10)).lineTo(new squigle.Point(190,190));		
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads I will see a triangle with a black stroke that has used Z to close the path': function(){
        
        var image = visualHelper.getImage("images/triangle_black_stroke.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10))
			.lineTo(new squigle.Point(190,190))
			.lineTo(new squigle.Point(10,190))
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When page loads I will see an open ended cubic bezier curve with no fill': function(){
        
        var image = visualHelper.getImage("images/bezier_cubic_no_fill_black_stroke.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		path.moveTo(new squigle.Point(10,10)).curveTo(new squigle.Point(10,190), new squigle.Point(190,190), new squigle.Point(190,10));
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When page loads I will see a line drawn with decimal points': function(){
        
        var image = visualHelper.getImage("images/line_decimal.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		path.moveTo(new squigle.Point(10.5, 10.5)).lineTo(new squigle.Point(100.5, 190.5)).lineTo(new squigle.Point(190.5, 10.5));
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}
});

describe('Scenario 4: Path - Relative', {
	'before_each': function(){
		//Create a stub for browser sniffing
	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When I generate a horizontal line it will look as expected': function(){
        
        var image = visualHelper.getImage("images/path_horizontal_black_stroke_no_fill.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path();
		path.moveTo(new squigle.Point(100,100), true).moveTo(new squigle.Point(-90,-90), true).lineTo(new squigle.Point(180,0), true);
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a vertical line it will look as expected': function(){
        
        var image = visualHelper.getImage("images/path_vertical_black_stroke_no_fill.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path();
		path.moveTo(new squigle.Point(10,10), true).lineTo(new squigle.Point(0,180), true);		
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a diagonal line it will look as expected': function(){
        
        var image = visualHelper.getImage("images/path_diagonal_black_stroke_no_fill.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path();
		path.moveTo(new squigle.Point(10,10), true).lineTo(new squigle.Point(180,180), true);		
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads I will see a triangle with a black stroke that has used Z to close the path': function(){
        
        var image = visualHelper.getImage("images/triangle_black_stroke.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10), true)
			.lineTo(new squigle.Point(90,180), true)
			.lineTo(new squigle.Point(-180,0), true)
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When page loads I will see an open ended cubic bezier curve with no fill': function(){
        
        var image = visualHelper.getImage("images/bezier_cubic_no_fill_black_stroke.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		path.moveTo(new squigle.Point(10,10), true).curveTo(new squigle.Point(0,180), new squigle.Point(180,180), new squigle.Point(180,0), true);
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When page loads I will see a line drawn with decimal points': function(){
        
        var image = visualHelper.getImage("images/line_decimal.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		path.moveTo(new squigle.Point(10.5, 10.5), true).lineTo(new squigle.Point(90, 180), true).lineTo(new squigle.Point(90, -180), true);
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads I will see a quarter circle which goes right then down': function(){
        var image = visualHelper.getImage("images/round_right_down.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000")
        );
		path.moveTo(new squigle.Point(100, 100), true).roundTo(50, "rd");
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();		
	},
	'When the page loads I will see a quarter circle which goes right then up': function(){
        var image = visualHelper.getImage("images/round_right_up.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000")
        );
		path.moveTo(new squigle.Point(100, 100), true).roundTo(50, "ru");
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();		
	},
	'When the page loads I will see a quarter circle which goes left then down': function(){
        var image = visualHelper.getImage("images/round_left_down.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000")
        );
		path.moveTo(new squigle.Point(100, 100), true).roundTo(50, "ld");
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();		
	},
	'When the page loads I will see a quarter circle which goes left then up': function(){
        var image = visualHelper.getImage("images/round_left_up.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000")
        );
		path.moveTo(new squigle.Point(100, 100), true).roundTo(50, "lu");
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();		
	},
	'When the page loads I will see a quarter circle which goes down then left': function(){
        var image = visualHelper.getImage("images/round_down_left.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000")
        );
		path.moveTo(new squigle.Point(100, 100), true).roundTo(50, "dl");
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();		
	},
	'When the page loads I will see a quarter circle which goes down then right': function(){
        var image = visualHelper.getImage("images/round_down_right.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000")
        );
		path.moveTo(new squigle.Point(100, 100), true).roundTo(50, "dr");
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();		
	},
	'When the page loads I will see a quarter circle which goes up then left': function(){
        var image = visualHelper.getImage("images/round_up_left.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000")
        );
		path.moveTo(new squigle.Point(100, 100), true).roundTo(50, "ul");
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();		
	},
	'When the page loads I will see a quarter circle which goes up then right': function(){
        var image = visualHelper.getImage("images/round_up_right.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000")
        );
		path.moveTo(new squigle.Point(100, 100), true).roundTo(50, "ur");
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();		
	}
	
});


describe('Scenario 5: Stroke', {
	'before_each': function(){
		//Create a stub for browser sniffing
	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When I generate a thin line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/stroke_black_thin.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke(null, null, 1)
        );
		path.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a opaque line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/stroke_opaque_thick_red.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", 50, 10)
        );
		path.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a line with a flat endcap it will display as expected': function(){
        
        var image = visualHelper.getImage("images/stroke_thick_red_flat_endcap.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat")
        );
		path.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},	
	'When I generate a line with a rounded endcap it will display as expected': function(){
        
        var image = visualHelper.getImage("images/stroke_thick_red_round_endcap.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round")
        );
		path.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a line with a square endcap it will display as expected': function(){
        
        var image = visualHelper.getImage("images/stroke_thick_red.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square")
        );
		path.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a triangle with a round linejoin it will display as expected': function(){
        
        var image = visualHelper.getImage("images/triangle_red_round_endcap.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, null, "round")
        );
		path.moveTo(new squigle.Point(100,10))
			.lineTo(new squigle.Point(190,190))
			.lineTo(new squigle.Point(10,190))
			.close();
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a triangle with a miter linejoin it will display as expected': function(){
        
        var image = visualHelper.getImage("images/triangle_red_miter_endcap.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, null, "miter")
        );
		path.moveTo(new squigle.Point(100,10))
			.lineTo(new squigle.Point(190,190))
			.lineTo(new squigle.Point(10,190))
			.close();
		
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a short dashed line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_shortdash.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "shortdash")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "shortdash")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "shortdash")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a short dotted line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_shortdot.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "shortdot")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "shortdot")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "shortdot")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a short dash dot line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_shortdashdot.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "shortdashdot")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "shortdashdot")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "shortdashdot")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a short dash dot dot line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_shortdashdotdot.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "shortdashdotdot")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "shortdashdotdot")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "shortdashdotdot")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a dot line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_dot.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "dot")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "dot")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "dot")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a dash line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_dash.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "dash")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "dash")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "dash")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a long dash line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_longdash.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "longdash")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "longdash")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "longdash")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a long dash dot line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_longdashdot.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "longdashdot")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "longdashdot")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "longdashdot")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a long dash dot line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_longdashdot.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "longdashdot")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "longdashdot")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "longdashdot")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When I generate a long dash dot dot line it will display as expected': function(){
        
        var image = visualHelper.getImage("images/line_longdashdotdot.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
		
		//flat
        var path = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "flat", null, "longdashdotdot")
        );
		path.moveTo(new squigle.Point(10,50)).lineTo(new squigle.Point(190,50));
		
		//square
        var path2 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "square", null, "longdashdotdot")
        );
		path2.moveTo(new squigle.Point(10,100)).lineTo(new squigle.Point(190,100));
		
		//round
        var path3 = new squigle.Path(
			new squigle.Stroke("#FF0000", null, 10, "round", null, "longdashdotdot")
        );
		path3.moveTo(new squigle.Point(10,150)).lineTo(new squigle.Point(190,150));			
		
        canvas.append(path);
		canvas.append(path2);
		canvas.append(path3);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}
});

describe('Scenario 6: Fill', {
	'before_each': function(){
		//Create a stub for browser sniffing
	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When I generate a shape with no border by making the stoke the same color as the fill is will look as expected': function(){
        
        var image = visualHelper.getImage("images/small_rectangle_no_fill_red_stroke.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(150,100),
            new squigle.Point(10,10),
            new squigle.Stroke("#FF0000"),
            new squigle.Fill("#FF0000")
        );
        canvas.append(rectangle);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}
});

describe('Scenario 7: Coordinate System - preserveDecimals set to true', {
	'before_each': function(){
		//Create a stub for browser sniffing
	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When the page loads I will see a triangle loaded on a canvas zoomed out 100%': function(){
        
        var image = visualHelper.getImage("images/triangle_small_black_stroke_top_left.gif");
		
        var canvas = new squigle.Canvas(
			new squigle.Size(200,200),
			new squigle.Size(400,400)	
		);
		
        var path = new squigle.Path(
			new squigle.Stroke(null, null, 5),
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10))
			.lineTo(new squigle.Point(190,190))
			.lineTo(new squigle.Point(10,190))
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads I will see a triangle zoomed in by 100%': function(){
        
        var image = visualHelper.getImage("images/triangle_zoomed_black_stroke.gif");
		
        var canvas = new squigle.Canvas(
			new squigle.Size(200,200),
			new squigle.Size(100,100)	
		);
		
        var path = new squigle.Path(
			new squigle.Stroke(null, null, 5),
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10))
			.lineTo(new squigle.Point(190,190))
			.lineTo(new squigle.Point(10,190))
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads I will see a scaled down triangle': function(){
        
        var image = visualHelper.getImage("images/triangle_zoomed_out_black_stroke.gif");
		
        var canvas = new squigle.Canvas(
			new squigle.Size(200,200),
			new squigle.Size(300,300)	
		);
		
        var path = new squigle.Path(
			new squigle.Stroke(null, null, 5),
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10))
			.lineTo(new squigle.Point(190,190))
			.lineTo(new squigle.Point(10,190))
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}	
});

describe('Scenario 8: Coordinate System - preserveDecimals set to false', {
	'before_each': function(){
		squigle.preserveDecimals = false
	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When the page loads I will see a scaled down triangle loaded with a nine digit coordinate range': function(){
        
        var image = visualHelper.getImage("images/triangle_black_stroke_thick.gif");
		
        var canvas = new squigle.Canvas(
			new squigle.Size(200,200),
			new squigle.Size(200000000,200000000),
			new squigle.Point(100000000, 100000000)
		);
		
        var path = new squigle.Path(
			new squigle.Stroke(null, null, 5),
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(200000000,110000000))
			.lineTo(new squigle.Point(290000000,290000000))
			.lineTo(new squigle.Point(110000000,290000000))
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}		
});

describe('Scenario 8: Scale Element', {
	'before_each': function(){

	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When the page loads I will a rectangle that has been halved in size': function(){
        
        var image = visualHelper.getImage("images/square_red_half_scale.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(180,180),
            new squigle.Point(10,10),
            new squigle.Stroke("#FF0000"),
            new squigle.Fill("#FF0000")
        );
		rectangle.scale(0.5);
        canvas.append(rectangle);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true();
	},
	'When the page loads I will a rectangle that has been doubled in size': function(){
        
        var image = visualHelper.getImage("images/square_red_double_scale.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(90,90),
            new squigle.Point(10,10),
            new squigle.Stroke("#FF0000")
        );
		rectangle.scale(2);
        canvas.append(rectangle);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads the shape will double in size and retain its center point': function(){
        
        var image = visualHelper.getImage("images/square_red_double_size_retain_center_point.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(40,40),
            new squigle.Point(80,80),
            new squigle.Stroke("#FF0000", null, 5)
        );
		rectangle.scale(2, true);
        canvas.append(rectangle);
		
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads the shape will half in size and retain its center point': function(){
        
        var image = visualHelper.getImage("images/square_red_half_size_retain_center_point.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,200));
        var rectangle = new squigle.Rectangle(
            new squigle.Size(180,180),
            new squigle.Point(10,10),
            new squigle.Stroke("#FF0000", null, 5)
        );
		rectangle.scale(0.5, true);
        canvas.append(rectangle);
		
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads I will see a half size triangle': function(){
        
        var image = visualHelper.getImage("images/triangle_zoomed_out_black_stroke.gif");
		
        var canvas = new squigle.Canvas(
			new squigle.Size(200,200),
			new squigle.Size(200,200)	
		);
		
        var path = new squigle.Path(
			new squigle.Stroke(null, null, 5),
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10))
			.lineTo(new squigle.Point(190,190))
			.lineTo(new squigle.Point(10,190))
			.close();
		path.scale(0.5);	
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}			
});

describe('Scenario 8: Canvas', {
	'before_each': function(){

	},
	'Given the squigle namespace is available ': function(){
		value_of( typeof squigle ).should_be("object");
	},
	'When the page loads I will see a wide triangle': function(){
        
        var image = visualHelper.getImage("images/triangle_black_stroke_wide.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,100));
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10), true)
			.lineTo(new squigle.Point(90,80), true)
			.lineTo(new squigle.Point(-180,0), true)
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads I will see a long triangle': function(){
        
        var image = visualHelper.getImage("images/triangle_black_stroke_long.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(100,200));
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(50,10), true)
			.lineTo(new squigle.Point(45,180), true)
			.lineTo(new squigle.Point(-90,0), true)
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads I will see a wide triangle with a thick stroke': function(){
        
        var image = visualHelper.getImage("images/triangle_black_stroke_wide_thick.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,100));
        var path = new squigle.Path(
			new squigle.Stroke("#000000", null, 10),
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10), true)
			.lineTo(new squigle.Point(90,80), true)
			.lineTo(new squigle.Point(-180,0), true)
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},
	'When the page loads I will see a long triangle with a thick stroke': function(){
        
        var image = visualHelper.getImage("images/triangle_black_stroke_long_thick.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(100,200));
        var path = new squigle.Path(
			new squigle.Stroke("#000000", null, 10),
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(50,10), true)
			.lineTo(new squigle.Point(45,180), true)
			.lineTo(new squigle.Point(-90,0), true)
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},	
	'When the page loads I will a line triangle where the bottom half is not visible': function(){
        
        var image = visualHelper.getImage("images/triangle_black_no_bottom.gif");
		
        var canvas = new squigle.Canvas(new squigle.Size(200,100));
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10), true)
			.lineTo(new squigle.Point(90,180), true)
			.lineTo(new squigle.Point(-180,0), true)
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},	
	'The aspect ratio should not be preserved, and the triangle will be squashed vertically': function(){
        
        var image = visualHelper.getImage("images/triangle_black_stroke_squashed_vertically.gif");
		
        var canvas = new squigle.Canvas(
			new squigle.Size(200,100),
			new squigle.Size(200,200)
		);
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10), true)
			.lineTo(new squigle.Point(90,180), true)
			.lineTo(new squigle.Point(-180,0), true)
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	},	
	'The aspect ratio should not be preserved, and the triangle will be squashed horizontally': function(){
        
        var image = visualHelper.getImage("images/triangle_black_stroke_squashed_horizontally.gif");
		
        var canvas = new squigle.Canvas(
			new squigle.Size(100,200),
			new squigle.Size(200,200)
		);
        var path = new squigle.Path(
			null,
			new squigle.Fill("#FFFFFF", 0)
        );
		
		path.moveTo(new squigle.Point(100,10), true)
			.lineTo(new squigle.Point(90,180), true)
			.lineTo(new squigle.Point(-180,0), true)
			.close();
			
        canvas.append(path);
		
		visualHelper.getLeftBox().appendChild( canvas.container() ); 
		visualHelper.getRightBox().appendChild( image );
		
		var answer = confirm( "Press OK if the image in the right box is identicle to the image in the left box \n. Otherwise press cancel" ); 
		
		visualHelper.remove();		
		value_of( answer ).should_be_true ();
	}		
});

// ]]></script>
</head>
<body>
<div style="display:none;"><p>A</p><p>B</p></div>
</body>
</html>
